<template>
    <div class="playerContent">
      <div class="title">
        <div class="line"></div>
        <div class="name">比赛管理</div>
        <div class="add" @click="handleAdd">新增训练</div>
        <div class="btn">导出</div>
      </div>
      <div class="search">
        <div class="inputItem">
          <span>比赛名称</span>
          <common-input v-model="raceForm.name" placeholder="请输入比赛名称"></common-input>
        </div>
        <div class="inputItem">
          <span>比赛时间</span>
          <el-date-picker v-model="raceForm.timeRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
        <div class="inputItem"></div>
        <div class="btns">
          <div class="btn searchBtn" @click="handleSearch">查询</div>
          <div class="btn resetBtn" @click="handleReset">重置</div>
          <div class="btn resetBtn" @click="handleDel">删除</div>
        </div>
      </div>
      <div class="content">
        <CommonTablePage style="flex: 1" :columns="trainColumns" :pagination="pageInfo" :tableData="tableData">
          <template #userList="{ row }">
            <span v-for="(item, index) in row.userList" :key="index">{{ item }}</span>
          </template>
          <template #edit="{ row }">
            <span style="color: #fe720e;cursor: pointer;" @click="handleEdit(row)">编辑</span>
          </template>
        </CommonTablePage>
      </div>
      <changeDialog v-if="changeDialog" :changeDialog.sync="changeDialog" :curRow="curRow"></changeDialog>
    </div>
  </template>
  <script>
  import { trainColumns } from "./column.js";
  import { viewMinix } from "@/minix/viewMinix.js";
  import changeDialog from "./components/changeDialog.vue";
  export default {
    components: {
      changeDialog,
    },
    mixins: [viewMinix],
    data() {
      return {
        curRow: {},
        changeDialog: false,
        trainColumns,
        tableData: [
          {
            id:1,
            name: "张三",
            time: "2019-10-09 19:00 - 2019-10-09 20:00",
            userList: ["1", "2", "3"],
            referee: ['李武'],
            raceArea: "篮球场",
            state: "0",
          },
        ],
        raceForm: {
          name: "",
          timeRange: "",
        },
  
        rows: [],
      };
    },
    methods: {
      async getTableData() { },
      handleReset() {
        this.name = "";
        this.time = ["", ""];
      },
      selRows(rows) {
        this.rows = rows;
      },
      handleDel() {
        if (this.rows.length < 1) {
          return this.$message({
            type: "error",
            message: "请勾选球员信息!",
          });
        }
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => { });
      },
      handleAdd() {
        this.curRow = { id: "" };
        this.changeDialog = true;
      },
      handleEdit(row) {
        this.curRow = row;
        console.log(this.curRow);
        this.changeDialog = true;
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .playerContent {
    height: 100%;
    display: flex;
    flex-direction: column;
  
    .title {
      display: flex;
      align-items: center;
      height: 70px;
      padding: 10px;
      padding-left: 30px;
      background-color: #fff;
      font-weight: 600;
      border-radius: 5px;
      margin-bottom: 15px;
  
      .line {
        height: 20px;
        background-color: #fc7414;
        width: 6px;
        margin-right: 10px;
      }
  
      .btn {
        width: 68px;
        height: 32px;
        display: flex;
        font-size: 14px;
        background-color: #fc6c09;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
  
      .add {
        margin-left: auto;
  
        margin-right: 16px;
        width: 68px;
        height: 32px;
        display: flex;
        font-size: 14px;
        background-color: #fc6c09;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
    }
  
    .search {
      height: 80px;
      margin-top: 15px;
      padding: 10px;
      padding-left: 30px;
      height: 80px;
      display: flex;
      align-items: center;
      background-color: #fff;
  
      .inputItem {
        display: flex;
        margin-right: 10px;
  
        span {
          width: 70px;
          display: flex;
          align-items: center;
        }
      }
  
      .btns {
        display: flex;
  
        .btn {
          width: 68px;
          height: 32px;
          display: flex;
          font-size: 14px;
          background-color: #fc6c09;
          border-radius: 4px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
        }
  
        .searchBtn {
          margin-right: 16px;
        }
  
        .resetBtn {
          margin-right: 16px;
        }
      }
    }
  
    .content {
      flex: 1;
      margin-top: 20px;
      display: flex;
      background-color: #fff;
      padding: 15px 10px 10px 30px;
    }
  }
  </style>
  